import 'package:flutter/material.dart';
import 'package:example_flutter/blocs/chuck_bloc.dart';
import 'package:example_flutter/common_views.dart';
import 'package:example_flutter/models/chuck_response.dart';
import 'package:example_flutter/networking/response.dart';

class ShowChuckyJoke extends StatefulWidget {
  
  final String selectedCategory;

  const ShowChuckyJoke(this.selectedCategory);

  @override
  _ShowChuckyJokeState createState() => _ShowChuckyJokeState();
}

class _ShowChuckyJokeState extends State<ShowChuckyJoke> {

  ChuckBloc _bloc;

  @override
  void initState() {
    _bloc = ChuckBloc(widget.selectedCategory);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        title: Text('Chucky Joke', style: TextStyle(color: Colors.white, fontSize: 20)),
        backgroundColor: Color(0xFF333333),
      ),
      backgroundColor: Color(0xFF333333),
      body: RefreshIndicator(
        onRefresh: () => _bloc.fetchChuckyJoke(widget.selectedCategory),
        child: StreamBuilder<Response<ChuckResponse>>(
          stream: _bloc.chuckDataStream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              switch (snapshot.data.status) {
                case Status.LOADING:
                  return Loading(loadingMessage: snapshot.data.message);
                  break;
                case Status.COMPLETED:
                  return ChuckJoke(displayJoke: snapshot.data.data);
                  break;
                case Status.ERROR:
                  return Error(
                    errorMessage: snapshot.data.message,
                    onRetryPressed: () =>
                      _bloc.fetchChuckyJoke(widget.selectedCategory),
                  );
                  break;
              }
            }
            return Center(
              child: RaisedButton(
                color: Colors.white,
                child: Text('重新获取数据', style: TextStyle(color: Colors.black)),
                onPressed: () {
                  _bloc.fetchChuckyJoke(widget.selectedCategory);
                }),
            );
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    _bloc.dispose();
    super.dispose();
  }
}

class ChuckJoke extends StatelessWidget {

  final ChuckResponse displayJoke;

  const ChuckJoke({Key key, this.displayJoke}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints.expand(),
      color: Color(0xFF736AB7),
      child: Stack(
        children: <Widget>[
          _getBackground(),
          _getGradient(context),
          _getContent()
        ],
      ),
    );
  }

  Container _getBackground() {
    return Container(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/chuck.png'),
            fit: BoxFit.cover
          )
        ),
        child: null,
      ),
    );
  }

  Container _getGradient(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 90.0),
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: <Color>[Color(0x00736AB7), Color(0xFF333333)],
          stops: [0.0, 0.9],
          begin: const FractionalOffset(0.0, 0.0),
          end: const FractionalOffset(0.0, 1.0),
        )
      ),
    );
  }

  Widget _getContent() {
    return ListView(
      padding: EdgeInsets.fromLTRB(0, 280, 0, 32),
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(70),
          decoration: BoxDecoration(
            color: Color(0xFFFFFFFF),
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25),
              bottomRight: Radius.circular(25)
            )
          ),
          padding: EdgeInsets.symmetric(horizontal: 32),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(5, 15, 0, 0),
                child: Image.network(
                  displayJoke.icon_url,
                  fit: BoxFit.cover,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10),
                child: Text(
                  displayJoke.value,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    fontFamily: 'Roboto'
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}